import * as echarts from 'echarts';
import { MutableRefObject, useEffect,useRef } from 'react';
interface props {
    yAxis?:Array<String>
    name:String
    dataefficty:Array<Number>

}
function Echarts(props: props) {
    const demoRef:MutableRefObject<any>=useRef()
    const charInit=():void=>{
        const myChart:echarts.EChartsType=echarts.init(demoRef.current)
        myChart.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              top: '3%',
              bottom:'10%',
              containLabel: true
            },
            legend: {
              bottom:'0%',
              itemWidth: 15,
              itemHeight: 5,
              itemStyle: {
                color: 'rgba(4, 104, 255, 1)'
              },
              textStyle: {
                fontSize: 13,
                color: '#c2c2c2'
              }
            },
            yAxis: [
              {
                type: 'category',
                data: props.yAxis,
                axisTick: {
                  alignWithLabel: true
                },
                nameTextStyle:{
                    color:'#323232',
                    
                }
              }
            ],
            xAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: props.name,
                type: 'bar',
                barWidth: '30%',
                data: [150, 220, 280, 350, 450],
                itemStyle: {
                  color: 'rgba(4, 104, 255, 1)'
                }
              }
            ]
        })
    }
    useEffect(()=>{
        charInit()
    },[])
    return ( 
        <div ref={demoRef} style={{width:'543px',height:'318px'}}></div>
     );
}

export default Echarts;
// type EChartsOption = echarts.EChartsOption;

// var chartDom = document.getElementById('main')!;
// var myChart = echarts.init(chartDom);
// var option: EChartsOption;

// option = 

// option && myChart.setOption(option);
